<template>
  <div class="container">
    <div style="padding:10px 0;">
        <div style="padding:15px;border:1px solid #eee;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/resourceUpload' }">媒资上传</el-breadcrumb-item>
                <el-breadcrumb-item>转码记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <div>
      <div style="padding:10px 0;">
        <div style="padding:15px;border:1px solid #eee;display:flex;align-items: center;">
            <span style="padding: 8px">上传状态：</span>
            <el-radio-group v-model="query.status" @change="initAjaxMethod">
              <el-radio :label="-1">全部</el-radio>
              <el-radio :label="0">转码中</el-radio>
              <el-radio :label="1">转码成功</el-radio>
              <el-radio :label="2">转码失败</el-radio>
            </el-radio-group>
        </div>
      </div>
      <el-table
          :data="tableData"
          border
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column> -->
          <el-table-column label="序号" width="55">
            <template slot-scope="scope">{{
              scope.$index + (query.pageIndex - 1) * query.pageSize + 1
            }}</template>
          </el-table-column>
          <el-table-column label="文件名" align="center">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.type == 0">图片</span>
                <span v-if="scope.row.type == 1">视频</span>
            </template>
          </el-table-column>
          <el-table-column label="上传状态" align="center">
            <template slot-scope="scope">
                <p v-if="scope.row.status == 0">
                  <el-progress :percentage="scope.row.compress_progress"></el-progress>
                </p>
                <span v-if="scope.row.status == 1" style="color:#67C23A">转码成功</span>
                <span v-if="scope.row.status == 2" style="color:#F56C6C">转码失败</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope" v-if="scope.row.status == 2 && roulShowList.btn1.type">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="againUpload(scope.row)" style="padding-right:20px;">重新转码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            layout="sizes,total, prev, pager, next, jumper"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :page-sizes="[10,20, 50, 100, 150, 200]"
            @size-change="handleSizeChange"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>  
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      query:{
        pageIndex:1,
        pageSize:10,
        status:-1
      },
      activeName:'1',
      pageTotal:0,
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      tableData:[1],
      imgPath: this.$API.CrmImagesUrl,
      isMobile: this.$isMobile,
      newsList: [],
      perData: [],
      nextData: [],
      currentDetail: {},
      classOption: {
          limitMoveNum: 3,
          direction: 2,
      },
      currentIndex:0,
      type:null,
      exhibition_id:'',
      channel_id:'',
      roulShowList: {
          btn1: { rule: 'homepage,upload,re_compress', type: false, name: '重新转码' }
      },
    };
  },
  filters: {
    getdate(val) {
      if (!val) return "";
      return getdate(val, ".");
    },
  },
  mounted() {
    clearTimeout(this.timers)
    this.$TIMERS=true;
    this.initAjaxMethod();
    this.roleMethod();
  },
  methods: {
    handleSelectionChange(){

    },
    handleSizeChange(val) {
      this.query.pageSize=val;
      clearTimeout(this.timers)
      this.initAjaxMethod();
    },
    handlePageChange(val){
      this.query.pageIndex=val;
      clearTimeout(this.timers)
      this.initAjaxMethod();
    },
    initAjaxMethod() {
      this.$http.post(this.$API.MEDIA_FILE_COMPRESS_INDEX, {page:this.query.pageIndex,listRows:this.query.pageSize,status:this.query.status == -1?'':this.query.status})
        .then((res) => {
          // console.log("news", res);
          if (res.code == 1) {
            let list = Array.isArray(res.data.data) ? res.data.data:[];
            this.pageTotal=res.data.total;
            this.tableData=list;
            if(this.$TIMERS == true){
              this.timers=setTimeout(()=>this.initAjaxMethod(),3000)
            }
            
          }
        }).catch(err=>{
          if(this.$TIMERS == true){
              this.timers=setTimeout(()=>this.initAjaxMethod(),3000)
            }
        })
    },
    againUpload(data){
      const loading = this.$loading({ text: "加载中..." });
      this.$http
        .post(this.$API.MEDIA_FILE_COMPRESS_AGAIN, { id: data.id })
        .then((res) => {
          loading.close();
          // console.log("公海列表", res);
          if (res.code == 1) {
            this.$message.success("操作成功");
            clearTimeout(this.timers)
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    roleMethod(){
      this.$http.post(this.$API.GET_TRR_PAGE, { rule: 'homepage,upload' }).then((res) => {
            // console.log('页面权限', res);
            if (res.data === 'admin') {
                for (let i in this.roulShowList) {
                    this.roulShowList[i].type = true;
                }
            } else {
                res.data.forEach((item) => {
                    for (let j in this.roulShowList) {
                        if (item.rule == this.roulShowList[j].rule) {
                            this.roulShowList[j].type = true;
                        }
                    }
                });
            }
        });
    }
  },
  beforeDestroy(){
    this.$TIMERS=false;
    clearTimeout(this.timers)
  }
};
</script>
<style lang="less">
  .container{
    padding:20px;
    
  }
</style>


